<template>
	<view>

		<div class="status-bar" :style="{height: statusBarHeight}">
			<status-bar></status-bar>
		</div>

		<view class="jiaonang">
			<jiaonang></jiaonang>
		</view>

		<!-- 分段器 -->
		<view class="index-title" :style="{marginTop: statusNav, top: statusNav}">
			<view class="index-title-item">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
					activeColor="#ff6d9f"></uni-segmented-control>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view v-show="current === 0">
				<everyDay></everyDay>
			</view>
			<view v-show="current === 1">
				<togetherky></togetherky>
			</view>
			<view v-show="current === 2">
				<newjourney></newjourney>
			</view>
		</view>

		
	</view>
</template>

<script>

	import everyDay from './everyday/everyday.vue'
	import togetherky from './togetherky/together-ky.vue'
	import newjourney from './newjourney/newjourney.vue'

	export default {
		data() {
			return {
				statusBarHeight: "",
				statusNav: "",
				jiaonang: "",
				items: ['每日推荐', '共同抗疫', '新征程'],
				current: 0
			}
		},
		components: {
			everyDay,
			togetherky,
			newjourney
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		},
		mounted() {
			this.statusBarHeight = getApp().globalData.statusBar + "px";
			this.statusNav = getApp().globalData.statusNav + "px";
			this.jiaonang = getApp().globalData.navHeight + "px"
		},
		onPullDownRefresh() {
				console.log('refresh');
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			}
	}
</script>

<style scoped lang="scss">
	.status-bar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		background-color: #fff;
	}

	.index-title {
		position: sticky;
		z-index: 5;
		background-color: #fff;
		.index-title-item {
			width: 80%;
			margin: 0 auto;
			background-color: #fff;
			padding-bottom: 20rpx;
			padding-top: 20rpx;
		}
	}

</style>
